
Ext.onReady(function(){
    
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [ {  
            	id:'north-panel',
          region : 'north',
          contentEl:'north-div',
          height: 120,
         tbar:[ '->','Seja Bem Vindo: ', '', '  ', '-',{
             text: 'Alterar senha',
             handler: onChange
         }, '-', {
             text: 'Sair',
             handler: onClose
         }]
         
        }, {  
       region : 'west',
       contentEl:'west-div',
        split: true,   
        initialSize: 200,   
        titlebar: true,   
        collapsible: true,   
        animate: true  ,
        fitToFrame: true,
        closable: false,
        title: 'Menu Principal' 
       }, { 
    	   id:'center-panel',
       region: 'center'   ,
       contentEl:'content-div',
        titlebar: true,
        fitToFrame: true, 
        autoScroll: false, 
        title: 'Conteudo'
        	
       }]  
      });  
        function onClose() {
        	Ext.MessageBox.confirm('Confirme', 'Deseja sair ?', function(btn){
        	if (btn == 'yes') {
        		logout();
        	}
        	});        
        }
        function onChange() {
        	 alert("Alterar Senha");
        }
      

 });  